<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人中心 - 教育资源平台</title>

    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
</head>

<body class="bg-gray-100">
<!-- 导航栏 -->
<nav class="bg-white shadow-lg">
    <div class="container mx-auto px-4">
        <div class="flex justify-between items-center h-16">
            <a href="#" class="text-2xl font-bold text-blue-600">EduPlatform</a>
            <div class="flex items-center space-x-4">
                <a href="#" class="text-gray-600 hover:text-blue-600 px-3 py-2">课程中心</a>
                <a href="#" class="text-gray-600 hover:text-blue-600 px-3 py-2">学习记录</a>
                <a href="student.jsp" class="text-gray-600 hover:text-blue-600 px-3 py-2">返回首页</a>
                <div class="relative group">
                    <button class="flex items-center space-x-2 focus:outline-none">
                        <img src="https://randomuser.me/api/portraits/men/75.jpg"
                             class="w-10 h-10 rounded-full border-2 border-blue-200">
                        <span class="text-gray-700">John Doe</span>
                        <i class="fas fa-chevron-down text-sm"></i>
                    </button>
                    <div class="absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-2 hidden group-hover:block">
                        <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-blue-50"><i class="fas fa-user mr-2"></i>个人资料</a>
                        <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-blue-50"><i class="fas fa-cog mr-2"></i>账户设置</a>
                        <hr class="my-2">
                        <a href="#" class="block px-4 py-2 text-red-600 hover:bg-red-50"><i class="fas fa-sign-out-alt mr-2"></i>退出登录</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</nav>

<!-- 页面主体 -->
<div class="container mx-auto px-4 py-8">
    <!-- 个人信息卡片 -->
    <div class="bg-white rounded-xl shadow-lg overflow-hidden">
        <div class="bg-blue-600 h-32 relative">
            <div class="absolute -bottom-12 left-6">
                <div class="relative group">
<%--                  <a href="./avatar.jsp"></a>  <img src="https://randomuser.me/api/portraits/men/75.jpg">--%>
<%--                         class="w-24 h-24 rounded-full border-4 border-white shadow-lg">--%>
    <a href="../profile.jsp"><div class="avatar-container" onclick="showFileInput()">
        <img id="avatar-img" src="<%= request.getContextPath() %>/<%= session.getAttribute("avatarPath") != null ? session.getAttribute("avatarPath") : "images/default_avatar.jpg" %>" alt="头像">

    </div></a>
                    <div class="absolute inset-0 bg-black bg-opacity-50 rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
                        <i class="fas fa-camera text-white text-xl"></i>
                    </div>
                </div>
            </div>
        </div>
        <div class="pt-16 px-6 pb-6">
            <div class="flex justify-between items-start">
                <div>
                    <h2 class="text-2xl font-bold text-gray-800">John Doe</h2>
                    <p class="text-gray-600"><i class="fas fa-envelope mr-2"></i>johndoe@example.com</p>
                </div>
                <button class="bg-blue-100 text-blue-600 px-4 py-2 rounded-lg hover:bg-blue-200">
                    <i class="fas fa-edit mr-2"></i>编辑资料
                </button>
            </div>

            <!-- 数据统计 -->
            <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mt-6">
                <div class="bg-gray-50 p-4 rounded-lg">
                    <p class="text-gray-500">学习时长</p>
                    <p class="text-2xl font-bold text-gray-800">128<span class="text-sm ml-1">小时</span></p>
                </div>
                <div class="bg-gray-50 p-4 rounded-lg">
                    <p class="text-gray-500">已学课程</p>
                    <p class="text-2xl font-bold text-gray-800">15<span class="text-sm ml-1">门</span></p>
                </div>
                <div class="bg-gray-50 p-4 rounded-lg">
                    <p class="text-gray-500">学习成就</p>
                    <p class="text-2xl font-bold text-gray-800">8<span class="text-sm ml-1">项</span></p>
                </div>
                <div class="bg-gray-50 p-4 rounded-lg">
                    <p class="text-gray-500">会员状态</p>
                    <div class="flex items-center mt-1">
                        <span class="bg-blue-100 text-blue-600 px-2 py-1 rounded text-sm">VIP 会员</span>
                        <span class="text-gray-500 text-sm ml-2">2025-01-01 到期</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 我的课程 -->
    <div class="mt-8">
        <h3 class="text-xl font-bold text-gray-800 mb-4">最近学习</h3>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow">
                <img src="https://picsum.photos/400/200" alt="课程封面" class="w-full h-48 object-cover">
                <div class="p-4">
                    <div class="flex justify-between items-start">
                        <h4 class="text-lg font-bold text-gray-800">人工智能基础</h4>
                        <span class="bg-green-100 text-green-600 px-2 py-1 rounded text-sm">进行中</span>
                    </div>
                    <p class="text-gray-600 text-sm mt-2">王教授 · 计算机科学系</p>
                    <div class="mt-4">
                        <div class="flex justify-between text-sm text-gray-500">
                            <span>进度 65%</span>
                            <span>剩余 4.5 小时</span>
                        </div>
                        <div class="w-full bg-gray-200 rounded-full h-2 mt-2">
                            <div class="bg-blue-600 h-2 rounded-full w-3/4"></div>
                        </div>
                    </div>
                    <div class="mt-4 flex space-x-2">
                        <button class="bg-blue-600 text-white px-4 py-2 rounded-lg flex-1 hover:bg-blue-700">
                            继续学习
                        </button>
                        <button class="bg-gray-100 text-gray-600 px-3 py-2 rounded-lg hover:bg-gray-200">
                            <i class="fas fa-ellipsis-v"></i>
                        </button>
                    </div>
                </div>
            </div>

            <!-- 其他课程卡片（结构相同） -->
            <!-- 可以复制上述卡片结构添加更多课程 -->
        </div>
    </div>
</div>

<!-- 页脚 -->
<footer class="bg-gray-800 text-white mt-12">
    <div class="container mx-auto px-4 py-8">
        <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
            <div>
                <h5 class="text-lg font-bold mb-4">关于我们</h5>
                <ul class="space-y-2 text-gray-400">
                    <li><a href="#" class="hover:text-white">平台简介</a></li>
                    <li><a href="#" class="hover:text-white">加入我们</a></li>
                    <li><a href="#" class="hover:text-white">联系我们</a></li>
                </ul>
            </div>
            <div>
                <h5 class="text-lg font-bold mb-4">学习资源</h5>
                <ul class="space-y-2 text-gray-400">
                    <li><a href="#" class="hover:text-white">所有课程</a></li>
                    <li><a href="#" class="hover:text-white">学习路径</a></li>
                    <li><a href="#" class="hover:text-white">知识库</a></li>
                </ul>
            </div>
            <div>
                <h5 class="text-lg font-bold mb-4">帮助支持</h5>
                <ul class="space-y-2 text-gray-400">
                    <li><a href="#" class="hover:text-white">常见问题</a></li>
                    <li><a href="#" class="hover:text-white">使用指南</a></li>
                    <li><a href="#" class="hover:text-white">服务协议</a></li>
                </ul>
            </div>
            <div>
                <h5 class="text-lg font-bold mb-4">关注我们</h5>
                <div class="flex space-x-4">
                    <a href="#" class="text-2xl text-gray-400 hover:text-white"><i class="fab fa-weixin"></i></a>
                    <a href="#" class="text-2xl text-gray-400 hover:text-white"><i class="fab fa-weibo"></i></a>
                    <a href="#" class="text-2xl text-gray-400 hover:text-white"><i class="fab fa-github"></i></a>
                </div>
            </div>
        </div>
        <hr class="my-8 border-gray-700">
        <div class="text-center text-gray-400 text-sm">
            © 2025 EduPlatform 版权所有 京ICP备12345678号
        </div>
    </div>
</footer>
</body>
</html>